<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>OpenLayers - Welcome</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-core.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/autoloader/prism-autoloader.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/toolbar/prism-toolbar.min.js"></script>
  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
  <link rel="stylesheet" type="text/css"
    href="https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
    crossorigin="anonymous">
  <link rel="stylesheet" type="text/css"
    href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css"
    crossorigin="anonymous">
  <link rel="stylesheet" type="text/css"
    href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css"
    href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="/theme/ol.css">
  <link rel="stylesheet" type="text/css" href="/theme/site.css">
  <link rel="icon" type="image/svg+xml" href="/theme/img/logo-light.svg" media="(prefers-color-scheme: light)" />
  <link rel="icon" type="image/svg+xml" href="/theme/img/logo-dark.svg" media="(prefers-color-scheme: dark)" />
  <link rel="stylesheet" type="text/css" href="./theme/index.css">
</head>

<body>
  <header class="navbar navbar-expand-md navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation">
    <a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70" height="70"
        alt="">&nbsp;OpenLayers</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#olmenu"
      aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- menu items that get hidden below 768px width -->
    <nav class="collapse navbar-collapse" id="olmenu">
      <ul class="nav navbar-nav ms-auto">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-bs-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">Docs</a>
          <div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="docdropdown">
            <a class="dropdown-item" href="/doc/">Docs</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="/doc/quickstart.html"><i class="fa fa-check fa-fw me-2 fa-lg"></i>快速入门</a>
            <a class="dropdown-item" href="/doc/faq.html"><i class="fa fa-question fa-fw me-2 fa-lg"></i>常见问题</a>
            <a class="dropdown-item" href="/doc/tutorials/"><i class="fa fa-book fa-fw me-2 fa-lg"></i>教程</a>

          </div>
        </li>
        <li class="nav-item"><a class="nav-link" href="/en/latest/examples/">Examples</a></li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="apidropdown" role="button" data-bs-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-sitemap me-1"></i>API
          </a>
          <div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="apidropdown">
            <a class="dropdown-item" href="/en/latest/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v8.2.0
              (latest)</a>
          </div>
        </li>

      </ul>
    </nav>
  </header>

  <div id='map'></div>
  <div class='container'>
    <blockquote id='tagline' class='text-end plain'>
      <p>一个高性能、功能齐全的库，可满足您的所有映射需求。</p>
    </blockquote>
    <div class='row' id='news'>
      <div class='col-sm-12'>
        <h1 class='topic'><i class='fa fa-rss'></i> 最新</h1>
        <p> 查看 <a href="/doc/">文档</a>
          和 <a href="/en/latest/examples/">示例</a> 即可开始。</p>
      </div>
    </div>
    <div class='row'>
      <h1 class='topic col-sm-12'>概述</h1>
    </div>
    <div class='row'>
      <div class='col-sm-12'>
        <p>
          OpenLayers使在任何网页中嵌入动态地图变得简单。它可以显示来自任何源的地图瓦片、矢量数据和标记。OpenLayers的目的是进一步推动各种地理信息的使用。它完全是免费的，开源JavaScript，根据2-clause
          BSD许可证（也称为FreeBSD）发布。</p>
      </div>
    </div>
    <div class='row'>
      <h1 class='topic col-sm-12'>特征</h1>
    </div>
    <div class='row'>
      <div class='col-sm-6'>
        <h3>瓦片图层</h3>
        <img src='/theme/img/tiled-layers.png' width="102" height="84" class='thumb' alt="tiled layers">
        <p>从OSM、Bing、MapBox、Stadia Maps和任何其他XYZ源获取瓦片。还支持OGC映射服务和未平铺层。</p>
      </div>
      <div class='col-sm-6'>
        <h3>矢量图层</h3>
        <img src='/theme/img/vector-layers.png' width="102" height="84" class='thumb' alt="vector layers">
        <p>从GeoJSON、TopoJSON、KML、GML、Mapbox矢量瓦片和其他格式渲染矢量数据。</p>
      </div>
    </div>
    <div class='row'>
      <div class='col-sm-6'>
        <h3>尖端技术，快速且移动就绪</h3>
        <img src='/theme/img/timeline.png' width="102" height="84" class='thumb' alt="mobile ready">
        <p>利用Canvas 2D、WebGL以及HTML5的所有最新优势。开箱即用的移动支持。只需使用您需要的组件即可构建轻量级的自定义配置文件。</p>
      </div>
      <div class='col-sm-6'>
        <h3>易于定制和扩展</h3>
        <img src='/theme/img/popup.png' width="102" height="84" class='thumb' alt="customizable">
        <p>使用简单直接的CSS来定制地图控件的样式。对接API的不同级别或使用 <a href="/3rd-party/">第三方库</a>自定义和扩展功能。</p>
      </div>
    </div>
    <div class='row'>
      <h1 class='topic col-sm-12'>了解更多</h1>
    </div>
    <div class='row'>
      <div class='col-sm-6'>
        <a href='/doc/quickstart.html'>
          <h3><i class='fa fa-check'></i> 快速入门</h3>
        </a>
        <p>请点击这里开始。</p>
      </div>
      <div class='col-sm-6'>
        <a href='/doc/tutorials/'>
          <h3><i class='fa fa-book'></i> 教程</h3>
        </a>
        <p>花点时间学习基础知识，然后学习先进的地图制作技术。</p>
      </div>
      <div class='row'>
        <div class='col-sm-6'>
          <a href='/en/latest/apidoc/'>
            <h3><i class='fa fa-sitemap'></i> API 文档</h3>
          </a>
          <p>浏览API文档以了解代码使用的详细信息。</p>
        </div>
      </div>

      <!-- <div class='row'>
        <h1 class='topic col-sm-12'>老版本</h1>
        <div class='col-sm-12'>
          <p>如果您尚未准备好使用OpenLayers的最新版本，可以前往老版本。</p>
          <ul>
            <li>Latest v7: <a href="https://github.com/openlayers/openlayers/releases/tag/v7.5.2">v7.5.2</a> released
              2023-08-31 &mdash; <a href="/en/v7.5.2/doc/">docs</a>, <a href="/en/v7.5.2/apidoc/">API</a> &amp; <a
                href="/en/v7.5.2/examples/">examples</a></li>
            <li>Latest v6: <a href="https://github.com/openlayers/openlayers/releases/tag/v6.15.1">v6.15.1</a> released
              2022-07-18 &mdash; <a href="/en/v6.15.1/doc/">docs</a>, <a href="/en/v6.15.1/apidoc/">API</a> &amp; <a
                href="/en/v6.15.1/examples/">examples</a></li>
            <li>Latest v5: <a href="https://github.com/openlayers/openlayers/releases/tag/v5.3.0">v5.3.0</a> released
              2018-11-06 &mdash; <a href="/en/v5.3.0/doc/">docs</a>, <a href="/en/v5.3.0/apidoc/">API</a> &amp; <a
                href="/en/v5.3.0/examples/">examples</a></li>
            <li>Latest v4: <a href="https://github.com/openlayers/openlayers/releases/tag/v4.6.5">v4.6.5</a> released
              2018-03-20 &mdash; <a href="/en/v4.6.5/doc/">docs</a>, <a href="/en/v4.6.5/apidoc/">API</a> &amp; <a
                href="/en/v4.6.5/examples/">examples</a></li>
            <li>Latest v3: <a href="https://github.com/openlayers/openlayers/releases/tag/v3.20.1">v3.20.1</a>, released
              2016-12-21 &mdash; <a href="/en/v3.20.1/doc/">docs</a>, <a href="/en/v3.20.1/apidoc/">API</a> &amp; <a
                href="/en/v3.20.1/examples/">examples</a></li>

          </ul>
          <p>通过使用OpenLayers的最新版本，您将获得更好的性能和可用性。</p>
        </div>
      </div> -->
      <!-- <div class='row'>
        <h1 class='topic col-sm-12'>Get Involved</h1>
      </div>
      <div class='row'>
        <div class='col-sm-4'>
          <a href='https://github.com/openlayers/openlayers'>
            <h3><i class="fa fa-code-fork"></i> Fork the repo</h3>
          </a>
        </div>
        <div class='col-sm-4'>
          <a href='https://github.com/openlayers/openlayers/issues'>
            <h3><i class="fa fa-bug"></i> Open a ticket</h3>
          </a>
        </div>
        <div class='col-sm-4'>
          <a href='http://stackoverflow.com/questions/tagged/openlayers'>
            <h3><i class="fa fa-user"></i> Ask a question</h3>
          </a>
        </div>
      </div> -->
    </div>
    <script src="./main.js"></script>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>